<template>
  <div :id="controlid" class="analysisTask">
    <userechart
      ref="chart_line_one"
      :options="options"
      :height="height"
      :bordermodel="bordermodel"
      :title="title"
      :iconclass="iconclass"
      :iconcolor="iconcolor"
      :titlecolor="titlecolor"
      :decorationmodel="decorationmodel"
    />
  </div>
</template>

<script>
import userechart from '@/components/echart/index.vue'
export default {
  name: 'linechart',
  props: [
    'height',
    'axisdata',
    'axistype',
    'tooltip',
    'tooltip_left',
    'series',
    'bordermodel',
    'title',
    'iconclass',
    'iconcolor',
    'titlecolor',
    'decorationmodel'
  ],
  data() {
    return {
      options: {
        legend: {
          data: ['邮件营销', '联盟广告']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: '邮件营销',
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            }
          },
          {
            name: '联盟广告',
            data: [100, 230, 214, 218, 135, 147, 260],
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            }
          }
        ],
        controlid: ''
      }
    }
  },
  methods: {
    initvalue() {
      if (this.axistype === '') {
        this.options.xAxis.type = 'category'
        this.options.xAxis.data = this.axisdata
        this.options.yAxis.type = 'value'
        delete this.options.yAxis.data
      }
      if (this.axistype === 'x') {
        this.options.xAxis.type = 'category'
        this.options.xAxis.data = this.axisdata
        this.options.yAxis.type = 'value'
        delete this.options.yAxis.data
      }
      if (this.axistype === 'y') {
        this.options.yAxis.type = 'category'
        this.options.yAxis.data = this.axisdata
        this.options.xAxis.type = 'value'
        delete this.options.xAxis.data
      }
      this.options.legend.show = this.tooltip
      this.options.legend.left = this.tooltip_left
    }
  },
  created() {
    this.controlid =
      'div' + Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
  },
  mounted() {
    this.initvalue()
    this.$refs.chart_line_one.initChart()
  },
  watch: {
    axistype(val) {
      if (val === '') {
        this.options.xAxis.type = 'category'
        this.options.xAxis.data = this.axisdata
        this.options.yAxis.type = 'value'
        delete this.options.yAxis.data
      }
      if (val === 'x') {
        this.options.xAxis.type = 'category'
        this.options.xAxis.data = this.axisdata
        this.options.yAxis.type = 'value'
        delete this.options.yAxis.data
      }
      if (val === 'y') {
        this.options.yAxis.type = 'category'
        this.options.yAxis.data = this.axisdata
        this.options.xAxis.type = 'value'
        delete this.options.xAxis.data
      }
      this.$refs.chart_line_one.setOption()
    },
    axisdata(val) {
      if (this.options.xAxis.type === 'x') {
        this.options.xAxis.type = 'category'
        this.options.xAxis.data = val
        this.options.yAxis.type = 'value'
        delete this.options.yAxis.data
      } else {
        this.options.yAxis.type = 'category'
        this.options.yAxis.data = val
        this.options.xAxis.type = 'value'
        delete this.options.xAxis.data
      }
      this.$refs.chart_line_one.setOption()
    },
    tooltip(val) {
      if (val === undefined || val === '') {
        this.options.legend.show = true
      } else {
        this.options.legend.show = val
      }
      this.$refs.chart_line_one.setOption()
    },
    tooltip_left(val) {
      if (val === undefined || val === '') {
        this.options.legend.left = 'left'
      } else {
        this.options.legend.left = val
      }
      this.$refs.chart_line_one.setOption()
    }
  },
  components: {
    userechart
  }
}
</script>
